<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <template #username="{ record }">
        <a-link @click="openInfo(record)">{{ record.username }}</a-link>
      </template>
      <template #beforeTable>
        <button-group :button-groups="buttonGroups" :crud-ref="crudRef" :selected="selected"/>
      </template>
      <template #operationCell="{ record }">
        <a-popconfirm
          content="确定要重置密码为123456吗?"
          position="bottom"
          @ok="repassword(record.id)"
          v-auth="['customers:customer:repassword']"
        >
        <a-link ><icon-edit />重置密码</a-link>
        </a-popconfirm>
        <a-link v-auth="['customers:customer:login']" @click="customerLogin(record.id)"><icon-user />登陆客户平台</a-link>
      </template>
    </ma-crud>
    <base-info ref="baseInfo" />
    <add-modal ref="addModalRef"></add-modal>
  </div>
</template>
<script setup>
import {ref, reactive,provide,computed,h} from 'vue'
import customer from '@/api/customers/customer'
import BaseInfo from '@/views/customers/customer/components/info.vue'
import ButtonGroup from "@cps/actions/buttonGroup.vue";
import {Message} from "@arco-design/web-vue";
import AddModal from "@cps/actions/addModal.vue";
const crudRef = ref()
const baseInfo = ref()
const addModalRef = ref()
const selected = computed(() => crudRef.value?.selecteds)
const openInfo = (record) => {
  baseInfo.value.open(record)
}
const repassword = async (id) => {
    let res = await customer.repassword(id)
    Message.success(res.message)
}
const buttonGroups = [
  {
    title: '批量修改',
    api: customer.updateBatch,
    auth: ['customers:customer:updateBatch'],
    form: {
      columns: [
        {
          title: "客户等级",
          dataIndex: "grade_id",
          dict: {
            url: 'customers/customerGrade/list',
            props: {label: 'name', value: 'id'},
            params: {
              select: 'id,name',
            }
          },
          formType: "select"
        },
        {
          title: "结算方式",
          dataIndex: "pay_type",
          formType: "select",
          dict: {
            name: "settlement",
            props: {
              label: "title",
              value: "key"
            },
          }
        },
        {
          title: "账户状态",
          dataIndex: "status",
          formType: "select",
          dict: {
            name: "customerType",
            props: {
              label: "title",
              value: "key"
            },
          }
        },
        {
          title: "信用额度",
          dataIndex: "credit_limit",
          formType: "input"
        },
        {
          title: "财务代表",
          dataIndex: "finance_id",
          formType: "select",
          isEcho: true,
          virtualListProps:{},
          dict: {
            // 远程通用接口请求，新版代码生成都有一个 remote 接口
            url: 'system/user/list',
            // 指定组件接收的props
            props: {label: 'nickname', value: 'id'},
            translation: true,
            params: {
              select: 'id,nickname',
            }
          },

        },
        {
          title: "客服代表",
          dataIndex: "service_id",
          formType: "select",
          virtualListProps:{},
          isEcho: true,
          dict: {
            // 远程通用接口请求，新版代码生成都有一个 remote 接口
            url: 'system/user/list',
            // 指定组件接收的props
            props: {label: 'nickname', value: 'id'},
            translation: true,
            params: {
              select: 'id,nickname',
            }
          },

        },
        {
          title: "销售代表",
          dataIndex: "seller_id",
          formType: "select",
          isEcho: true,
          virtualListProps:{},
          dict: {
            // 远程通用接口请求，新版代码生成都有一个 remote 接口
            url: 'system/user/list',
            // 指定组件接收的props
            props: {label: 'nickname', value: 'id'},
            translation: true,
            params: {
              select: 'id,nickname',
            }
          },

        },
        {
          title: "销售来源",
          dataIndex: "source_id",
          translation: true,
          formType: "select",
          virtualListProps:{},
          isEcho: true,
          dict: {
            // 远程通用接口请求，新版代码生成都有一个 remote 接口
            url: 'system/user/list',
            // 指定组件接收的props
            props: {label: 'nickname', value: 'id'},
            translation: true,
            params: {
              select: 'id,nickname',
            }
          },
        },
        {
          title: "所属分公司",
          dataIndex: "organization_id",
          dict: {
            url: 'system/dept/list',
            props: {label: 'name', value: 'id'},
            translation: true,
            params: {
              select: 'id,name,parent_id',
              parent_id: 0
            }
          },

          formType: "select"
        },
        {
          title: "站点",
          dataIndex: "depots",
          formType: "select",
          dict: {
            url: 'warehouse/depot/list',
            props: {label: 'name', value: 'id'},
            translation: true,
            params: {
              select: 'id,name',
            }
          },

        },        
      ]
    }
  }
]
const options = reactive({
  id: 'customer',
  pageLayout: 'fixed',
  // searchLabelWidth:'150px',
  // searchLabelAlign:'right',
  rowSelection: {
    showCheckedAll: true,
  },
  pk: 'id',
  contextMenu: {
    // 是否开启右键菜单
    enabled: false,
  },
  formOption: {
    viewType: 'drawer',
    width: '80%',
    layout: [
      {
        formType: 'grid-tailwind',
        colNumber: 2,
        cols: [
          {
            formList: [
              {dataIndex: "username"},
              {dataIndex: "nick"},
              {dataIndex: "password"},
              {dataIndex: "label_code"},
              {dataIndex: "pay_type"},
              {dataIndex: "status"},
              {dataIndex: "auth_status"},
              {dataIndex: "contact"},
              {dataIndex: "email"},
              {dataIndex: "mobile"},
              {dataIndex: "tel"},
              {dataIndex: "qq"},
              {dataIndex: "grade_id"},
            ]
          },
          {
            formList: [
              {dataIndex: "credit_limit"},
              {dataIndex: "finance_id"},
              {dataIndex: "service_id"},
              {dataIndex: "seller_id"},
              {dataIndex: "source_id"},
              {dataIndex: "organization_id"},
              // {dataIndex: "pickup_zone_id"},
              {dataIndex: "depots"},
              {dataIndex: "control"},
              {dataIndex: "last_login_at"},
              {dataIndex: "created_by"},
              {dataIndex: "updated_by"},
              {dataIndex: "created_at"},
              {dataIndex: "updated_at"},
              {dataIndex: "deleted_at"},
              {dataIndex: "remark"},
            ]
          },
        ]
      },
    ]
  },
  api: customer.getList,
  beforeRequest: (params) => {
    params.withUser = 1
  },
  tabs: {
    dataIndex: "auth_status",
    // 切换选项卡时，请求后台数据的参数名
    searchKey: "auth_status",
    // 选项卡切换事件
    // onChange: (value) => {
    //   const columnService = crudRef.value.getColumnService()
    //   if (value == 1) {
    //     columnService.get('shop_id').setAttr('hide', true)
    //     columnService.get('agent_id').setAttr('hide', false)
    //   }else if (value == 2) {
    //     columnService.get('shop_id').setAttr('hide', false)
    //     columnService.get('agent_id').setAttr('hide', true)
    //   }
    // },
  },
  recycleApi: customer.getRecycleList,
  add: {
    show: true,
    api: customer.save,
    auth: ['customers:customer:save']
  },
  edit: {
    show: true,
    api: customer.update,
    auth: ['customers:customer:update']
  },
  // delete: {
  //   show: true,
  //   api: customer.deletes,
  //   auth: ['customers:customer:delete'],
  //   realApi: customer.realDeletes,
  //   realAuth: ['customers:customer:realDeletes']
  // },
  // recovery: {
  //   show: true,
  //   api: customer.recoverys,
  //   auth: ['customers:customer:recovery']
  // },
  export: {
    show: true,
    url: 'customers/customer/export',
    auth: ['customers:customer:export']
  },
  operationColumn: true,
})

const customerLogin = (userId)=>{
  customer.login(userId).then(res=>{
    if(res.data.token){
      localStorage.setItem(res.data.name, res.data.token)
      window.open(res.data.link)
    }
  })
}

const columns = reactive([
  {
    title: "主键",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入主键"
    }
  },
  {
    title: "关键字",
    dataIndex: "keywords",
    editDisabled:true,
    formType: "input",
    search: true,
    hide: true,
    addDisplay:false,
    editDisplay:false,
  },
  {
    title: "用户名",
    dataIndex: "username",
    editDisabled:true,
    formType: "input",
    // search: true,
    commonRules: {
      required: true,
      message: "请输入用户名"
    }
  },
  {
    title: "联系人",
    dataIndex: "contact",
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入联系人"
    }
  },
  {
    title: "客户等级",
    dataIndex: "grade_id",
    dict: {
      // 远程通用接口请求，新版代码生成都有一个 remote 接口
      url: 'customers/customerGrade/list',
      // 指定组件接收的props
      props: {label: 'name', value: 'id'},
      translation: true,
      params:{
        select: 'id,name',
      }
    },
    formType: "select"
  },
  {
    title: "余额",
    dataIndex: "ye_amount",
    formType: "input",
    customRender: ({record}) => {
        let str = []
        for(let i in record.ye_amount) {
          str.push( h('span', i + ':' + record.ye_amount[i]))
          str.push( h('br'))
        }
        return h('div',str);
      },
  },
  {
    title: "欠款",
    dataIndex: "qk_amount",
    formType: "input",
    customRender: ({record}) => {
        let str = []
        for(let i in record.qk_amount) {
          str.push( h('span', i + ':' + record.qk_amount[i]))
          str.push( h('br'))
        }
        return h('div',str);
      },
  },
  {
    title: "实际余额",
    dataIndex: "sj_amount",
    formType: "input",
    customRender: ({record}) => {
        let str = []
        for(let i in record.sj_amount) {
          str.push( h('span', i + ':' + record.sj_amount[i]))
          str.push( h('br'))
        }
        return h('div',str);
      },
  },
  {
    title: "总充值余额",
    dataIndex: "zcz_amount",
    formType: "input",
  },
  {
    title: "结算方式",
    dataIndex: "pay_type",
    formType: "select",
    search: true,
    addDefaultValue: 1,
    commonRules: {
      required: true,
      message: "请输入结算方式"
    },
    dict: {
      name: "settlement",
      props: {
        label: "title",
        value: "key"
      },
      translation: true
    }
  },
  {
    title: "账户状态",
    dataIndex: "status",
    formType: "select",
    search: true,
    commonRules: {
      required: true,
      message: "请输入账户状态"
    },
    addDefaultValue: 1,
    dict: {
      name: "customerType",
      props: {
        label: "title",
        value: "key"
      },
      translation: true
    }
  },
  {
    title: "财务代表",
    dataIndex: "finance_id",
    formType: "select",
    multiple: false,
    isEcho: true,
    virtualListProps:{},
    dict: {
      // 远程通用接口请求，新版代码生成都有一个 remote 接口
      url: 'system/user/list',
      // 指定组件接收的props
      props: {label: 'nickname', value: 'id'},
      translation: true,
      params:{
        select: 'id,nickname',
      }
    },
    search: true
  },
  {
    title: "客服代表",
    dataIndex: "service_id",
    formType: "select",
    multiple: false,
    isEcho: true,
    virtualListProps:{},
    dict: {
      // 远程通用接口请求，新版代码生成都有一个 remote 接口
      url: 'system/user/list',
      // 指定组件接收的props
      props: {label: 'nickname', value: 'id'},
      translation: true,
      params:{select: 'id,nickname',}
    },
    search: true
  },
  {
    title: "销售代表",
    dataIndex: "seller_id",
    formType: "select",
    multiple: false,
    extra: "销售代表留空则默认为创建人",
    isEcho: true,
    virtualListProps:{},
    dict: {
      // 远程通用接口请求，新版代码生成都有一个 remote 接口
      url: 'system/user/list',
      // 指定组件接收的props
      props: {label: 'nickname', value: 'id'},
      translation: true,
      params:{
        select: 'id,nickname',
      }
    },
    search: true
  },
  {
    title: "销售来源",
    dataIndex: "source_id",
    translation: true,
    formType: "select",
    multiple: false,
    isEcho: true,
    virtualListProps:{},
    dict: {
      // 远程通用接口请求，新版代码生成都有一个 remote 接口
      url: 'system/user/list',
      // 指定组件接收的props
      props: {label: 'nickname', value: 'id'},
      translation: true,
      params:{
        select: 'id,nickname',
      }
    },
    search: true
  },
  {
    title: "所属分公司",
    dataIndex: "organization_id",
    dict: {
      url: 'system/dept/list',
      props: {label: 'name', value: 'id'},
      translation: true,
      params: {
        select: 'id,name,parent_id',
        parent_id:0
      }
    },
    search: true,
    formType: "select"
  },
  {
    title: "不允许发货",
    dataIndex: "",
    formType: "input",
  },
  {
    title: "备注",
    dataIndex: "remark",
    formType: "textarea",
  },
  {
    title: "最后登录时间",
    dataIndex: "last_login_at",
    formType: "range",
    addDisplay: false,
    editDisplay: false,
    search: true,
    showTime: true
  },
  {
    title: "最后下单时间",
    dataIndex: "last_order_at",
    formType: "range",
    addDisplay: false,
    editDisplay: false,
    search: true,
    showTime: true
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    showTime: true
  },

  {
    title: "昵称",
    dataIndex: "nick",
    formType: "input",
    search: true,
    hide:true
  },
  {
    title: "密码",
    dataIndex: "password",
    formType: "input-password",
    hide: true,
    addRules: {
      required: true,
      message: "请输入密码"
    },
    type: "password"
  },
  {
    title: "标签",
    dataIndex: "label_code",
    formType: "hide",
    hide:true
  },

  {
    title: "认证状态",
    dataIndex: "auth_status",
    formType: "select",
    search: true,
    dict: {
      name: "authType",
      props: {
        label: "title",
        value: "key"
      },
      translation: true
    },
    addDisplay: false,
    editDisplay: false,
    hide:true
  },

  {
    title: "邮箱",
    dataIndex: "email",
    formType: "input",
    hide:true
  },
  {
    title: "手机",
    dataIndex: "mobile",
    formType: "input",
    // search: true,
    hide:true
  },
  {
    title: "电话",
    dataIndex: "tel",
    formType: "input",
    hide:true
  },
  {
    title: "QQ",
    dataIndex: "qq",
    formType: "input",
    hide:true
  },

  {
    title: "信用额度",
    dataIndex: "credit_limit",
    addDefaultValue: 0,
    formType: "input",
    hide:true
  },
  {
    title: "站点",
    dataIndex: "depots",
    formType: "select",
    dict: {
      url: 'warehouse/depot/list',
      props: {label: 'name', value: 'id'},
      translation: true,
      params: {
        select: 'id,name',
      }
    },
    // search: true,
    hide:true
  },
  {
    title: "功能控制",
    dataIndex: "control",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "更新者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
])
provide('crudRef', crudRef)
</script>
<script> export default {name: 'customers:customer'} </script>